function getGoodsInfo(){
    // console.log(location.search);
	let goodsId = location.search.split("=")[1];
	$.get("../php/getGoodsInfo.php?goodsId="+goodsId,function(str){
		let goods = JSON.parse(str);
		let htmlStr = `
		<div class="bigBox">
        <div class="leftBox" id="leftBox1">
            <img src="../${goods.beiyong6}" alt="" id="xiaoxie";>
            <div class="mark" id="mark1"></div>
        </div>
        <ul class="items">
            <li class="item"><img src="../${goods.beiyong6}" alt=""  class="item-img"></li>
            <li class="item"><img src="../${goods.beiyong7}" alt="" class="item-img"></li>
            <li class="item"><img src="../${goods.beiyong3}" alt="" class="item-img"></li>
            <li class="item"><img src="../${goods.beiyong4}" alt="" class="item-img"></li>
        </ul>
        <div class="rightBox" id="rightBox1">
            <img src="../${goods.beiyong5}" alt="" id="daxie">
        </div>
    </div>

	<div id="classify_right">
        <p class="serial ">商品编号：${goods.goodsId}</p>
        <h2>${goods.goodsDesc}</h2>
        <div class="price_box">
            <span>￥${goods.goodsPrice}</span>
            <p>收藏</p>
        </div>
        <div class="line"></div>
        <p class="color">颜色:</p>
        <div class="color_box"><img src="../${goods.beiyong6}" alt=""></div>
        <div class="chi">
            <p>尺码:</p>
            <a href="#null">尺码指南
                <img src="../images/biao.png" alt="">
            </a>
            
        </div>
        <ul class="size">
            <li>XS</li>
            <li>S</li>
            <li>M</li>
            <li>L</li>
            <li>XL</li>
        </ul>
        <p class="num">数量:</p>
        <div class="ipt">
            <input type="button" value="-" id="jian">
            <input type="text" value="1" class="txt">
            <input type="button" value="+"  id="jiaa">
        </div>
        <div class="ipts">
            <input type="button" value="立即购买" class="mai"><br>
            <input type="button" value="加入购物车" class="jia" onclick="location.href='../html/shopping_cart.html?goodsCount=${goods.goodsCount}&goodsId=${goods.goodsId}'">
        </div>
        <div class="line"></div>
        <p class="goods">商品详情:</p>
        <div class="line"></div>
        <p class="goods">价格说明:<span class="you">&gt;</span></p>
        <div class="line"></div>
        <p class="goods">洗涤说明:<span class="you">&gt;</span></p>
        <div class="line"></div>
        <p class="goods">包装说明:<span class="you">&gt;</span></p>
        <div class="line"></div>
        分享到<span class="iconfont icon-weixin"></span>
        <span class="iconfont icon-weibo"></span>
    </div>
		`;
		$("#qq").html(htmlStr);
		big();
        add();
        addCount();
        jian();
	})
}

$(function(){
    getGoodsInfo();
})

// 放大镜
function big(){
var leftBox1 = document.querySelector("#leftBox1")
var item = document.getElementsByClassName("item");
var img = document.getElementsByClassName("item-img");
//创建一个下面商品小图标的数组，
var arr = ["../images/desc_w.png","../images/q.jpg","../images/w.jpg","../images/e.jpg"];
//右侧大图片的数组
var bigArrImg = ["../images/desc_q.jpg"]
//设置左侧盒子的移入显示，移出隐藏事件
leftBox1.onmouseover = function(){
	mark1.style.display = "block"
	rightBox1.style.display = "block";
}
leftBox1.onmouseout = function(){
	mark1.style.display = "none"
	rightBox1.style.display = "none"
}
for(var i = 0; i < item.length;i++){
	item[i].index = i;
	item[i].onmouseover = function(){
		for(var j = 0; j< item.length;j++){
			item[j].style.border = "none"
		}
		this.style.border = "2px solid red";
		xiaoxie.setAttribute("src",arr[this.index])
		daxie.setAttribute("src",arr[this.index])
	}
}
// mark1.onmousemove = function(e){	，开始是这样写的，但是会出现，小黄盒子偏离现象
//为左侧盒子设置鼠标移动事件，给小黄盒子设置移动
leftBox1.onmousemove = function(e){
	var e = e||event;
	//设置鼠标x和y的最大移动距离
	var x = e.clientX-leftBox1.offsetLeft-mark1.offsetWidth/2
	var y = e.clientY-leftBox1.offsetTop-mark1.offsetHeight/2
	// 设置小黄盒子的最大移动距离
	var maxW = leftBox1.offsetWidth-mark1.offsetWidth;
	var maxH = leftBox1.offsetHeight-mark1.offsetHeight;
	if(x<0){
		x=0
	}
	if(y<0){
		y=0
	}
	if(x>maxW){
		x=maxW
	}
	if(y>maxH){
		y=maxH
	}
	mark1.style.left = x+"px";
	mark1.style.top = y+"px";
	// 右侧大盒子的实际移动距离是左侧的两倍，并且是相反的
	daxie.style.left = -x*2+"px"
	daxie.style.top = -y*2+"px"
}}

function add(){
    $("#jiaa").on('click',function(){
        var num = $(this).prev().val();
        num++;
        $(this).prev().val(num);
    })
}
function jian(){
    $("#jian").on('click',function(){
        var numr = $(this).next().val();
        console.log(numr);
        numr--;
        if(numr<=1){
            numr=1;
        }
        $(this).next().val(numr);
    })
}

function addCount(){
    let goodsId = location.search.split("=")[1];
    $(".jia").on('click',function(){
        var count = this.parentNode.parentNode.children[9].children[1].value;
        $.ajax({
            url:'../php/addShoppingCart.php',
            type:'POST',
            data:{
                vipName:getCookie('username'),
                goodsId:goodsId,
                goodsCount:count
            },
            success(res){
                if(res==1){
                    console.log(res);
                }
            }
        })
    })
}


// 矢量图
$('.icon-liweisi').hover(function () {
    // over
    $(this).next().show()
    $(this).css({'background':'black','color':'white'})
}, function () {
    // out
    $(this).next().hide()
    $(this).css({'background':'white','color':'black'})
}
)
$('.icon-kaiqidingzhi').hover(function () {
    // over
    $(this).next().show()
    $(this).css({'background':'black','color':'white'})
}, function () {
    // out
    $(this).next().hide()
    $(this).css({'background':'white','color':'black'})
}
)
$('.icon-LEVIShuiyuan').hover(function () {
    // over
    $(this).next().show()
    $(this).css({'background':'black','color':'white'})
}, function () {
    // out
    $(this).next().hide()
    $(this).css({'background':'white','color':'black'})
}
)